<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>通道管理</title>
		<!-- Custom fonts for this template -->
		<link href="https://s0.pstatp.com/cdn/expire-1-M/font-awesome/5.1.0/css/all.css" rel="stylesheet" type="text/css">
		<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
		 rel="stylesheet">
		<!-- Custom styles for this template -->
        <link href="css/sb-admin-2.min.css" rel="stylesheet">
        <link rel="icon" href="img/zfsoft.ico">
		<!-- Custom styles for this page -->
		<link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/element.css">
	</head>
	<body id="page-top">

		<!-- Page Wrapper -->
		<div id="wrapper">

			<!-- Sidebar -->
			<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

				<!-- Sidebar - Brand -->
				<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
					<div class="sidebar-brand-icon rotate-n-15">
						<i class="fas fa-laugh-wink"></i>
					</div>
					<div class="sidebar-brand-text mx-3">区块链管理平台</sup></div>
				</a>

				<!-- Divider -->
				<hr class="sidebar-divider my-0">

				<!-- Nav Item - Dashboard -->
				<li class="nav-item">
					<a class="nav-link" href="index.html">
						<i class="fas fa-fw fa-tachometer-alt"></i>
						<span>系统概览</span></a>
				</li>

				<!-- Divider -->
				<hr class="sidebar-divider">

				<!-- Heading -->
				<div class="sidebar-heading">
					管理配置
				</div>

				<!-- Nav Item - Pages Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="host.html">
						<i class="fas fa-fw fa-cog"></i>
						<span>主机管理</span>
					</a>
				</li>

				<!-- Nav Item - Utilities Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="organizations.html">
						<i class="fas fa-fw fa-wrench"></i>
						<span>组织管理</span>
					</a>
				</li>

				<!-- Nav Item - Utilities Collapse Menu -->
				<li class="nav-item">
					<a class="nav-link collapsed" href="channel.html"
					 aria-controls="collapseUtilities">
						<i class="fas fa-fw fa-wrench"></i>
						<span>通道管理</span>
					</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link collapsed" href="net.html">
                      <i class="fas fa-fw fa-wrench"></i>
                      <span>网络管理</span>
                    </a>
                  </li>    

			</ul>
			<!-- End of Sidebar -->

			<!-- Content Wrapper -->
			<div id="content-wrapper" class="d-flex flex-column">

				<!-- Main Content -->
				<div id="content">

					<!-- Topbar -->
					<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

						<!-- Sidebar Toggle (Topbar) -->
						<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
							<i class="fa fa-bars"></i>
						</button>

						<!-- Topbar Search -->
						<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
							<div class="input-group">
								<input type="text" class="form-control bg-light border-0 small" placeholder="搜索..." aria-label="搜索"
								 aria-describedby="basic-addon2">
								<div class="input-group-append">
									<button class="btn btn-primary" type="button">
										<i class="fas fa-search fa-sm"></i>
									</button>
								</div>
							</div>
						</form>

						<!-- Topbar Navbar -->
						<ul class="navbar-nav ml-auto">

							<!-- Nav Item - Search Dropdown (Visible Only XS) -->
							<li class="nav-item dropdown no-arrow d-sm-none">
								<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown"
								 aria-haspopup="true" aria-expanded="false">
									<i class="fas fa-search fa-fw"></i>
								</a>
								<!-- Dropdown - Messages -->
								<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
									<form class="form-inline mr-auto w-100 navbar-search">
										<div class="input-group">
											<input type="text" class="form-control bg-light border-0 small" placeholder="搜索..." aria-label="搜索"
											 aria-describedby="basic-addon2">
											<div class="input-group-append">
												<button class="btn btn-primary" type="button">
													<i class="fas fa-search fa-sm"></i>
												</button>
											</div>
										</div>
									</form>
								</div>
							</li>



							<div class="topbar-divider d-none d-sm-block"></div>

							<!-- Nav Item - User Information -->
							<li class="nav-item dropdown no-arrow">
								<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
								 aria-haspopup="true" aria-expanded="false">
									<span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin</span>
									<img class="img-profile rounded-circle" src="img/admin.jpg">
								</a>
								<!-- Dropdown - User Information -->
								<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
									<a class="dropdown-item" href="login.html">
										<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
										退出
									</a>
								</div>
							</li>

						</ul>

					</nav>
					<!-- End of Topbar -->

					<!-- Begin Page Content -->
					<div class="container-fluid">
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							<!-- Page Heading -->
							<h1 class="h3 mb-2 text-gray-800">通道管理</h1>
							<h2 class="h5 mb-2 text-gray-800">创建的通道是区块链网络的基本模块，合约就需要加入通道后才能进行安装。</h2>
							<div style="text-align: left;;;margin-bottom: 20px;">
								<el-button type="primary" @click="open('ruleForm')">添加</el-button>
							</div>
							<template>
								<el-table :data="tableData" style="width: 100%">
									<el-table-column prop="name" label="名字" width=":50%">
									</el-table-column>
									<el-table-column prop="org" label="组织" width=":50%">
									</el-table-column>
								</el-table>
							</template>
							<div class="block" style="text-align: right;margin-top: 20px;">
								<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3"
								 :page-size="100" layout="prev, pager, next, jumper" :total="1000">
								</el-pagination>
							</div>
							<el-dialog title="添加" :visible.sync="dialogVisible" width="500" :before-close="handleClose">

								<el-form-item label="通道名称" prop="name">
									<el-input v-model="ruleForm.name" placeholder="输入通道名称"></el-input>
								</el-form-item>
                                
                                <el-form-item label="所在组织" prop="org">
									<el-checkbox-group v-model="ruleForm.org">
										<el-checkbox label="org1" name="org1"></el-checkbox>
										<el-checkbox label="org2" name="org2"></el-checkbox>
										<el-checkbox label="org3" name="org3"></el-checkbox>
										<el-checkbox label="org4" name="org4"></el-checkbox>
									</el-checkbox-group>
                                </el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
									<el-button @click="resetForm('ruleForm')">重置</el-button>
								</el-form-item>

							</el-dialog>
						</el-form>
					</div>
					<!-- /.container-fluid -->

				</div>
				<!-- End of Main Content -->


				<!-- Footer -->
				<footer class="sticky-footer bg-white">
					<div class="container my-auto">
						<div class="copyright text-center my-auto">
							<span>Copyright &copy; 卓繁信息 2020</span>
						</div>
					</div>
				</footer>
				<!-- End of Footer -->

			</div>
			<!-- End of Content Wrapper -->

		</div>
		<!-- End of Page Wrapper -->

		<!-- Scroll to Top Button-->
		<a class="scroll-to-top rounded" href="#page-top">
			<i class="fas fa-angle-up"></i>
		</a>

		<!-- Bootstrap core JavaScript-->
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>

		<!-- Core plugin JavaScript-->
		<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

		<!-- Custom scripts for all pages-->
		<script src="js/sb-admin-2.min.js"></script>

		<!-- Page level plugins -->
		<script src="vendor/datatables/jquery.dataTables.min.js"></script>
		<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>

		<!-- Page level custom scripts -->
		<script src="js/demo/datatables-demo.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/element.js"></script>
		<script>
			var vue = new Vue({
				el: '#wrapper',
				data(){
					var nameLimit = (rule, value, callback) => {
						if (value === '') {
							callback(new Error('请输入通道名称'));
						} else {
							const name= /^[a-z0-9]*$/
							if (name.test(value)) {
								callback();
							}else{
								callback(new Error('请输入正确的通道名称 仅小写字母和数字可用'));
							}
							
						}
					};
					return {

						currentPage3: 1,
						dialogVisible: false,
						tableData: [],
						ruleForm: {
							name: '',
							org: []
						},
						rules: {
							name: [{
								required: true,
								validator: nameLimit,
								trigger: 'blur'
							}],
							org: [{
								required: true,
								message: '必须选取一个组织',
								trigger: 'change'
							}]
						}
					}
				},
				methods: {
					handleSizeChange(val) {
						console.log(`每页 ${val} 条`);
					},
					handleCurrentChange(val) {
						console.log(`当前页: ${val}`);
					},
					handleClose(done) {
						this.dialogVisible = false;
					},
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								this.$message('添加成功！');
								let obj = {};
								for (x in this.ruleForm) {
									obj[x] = this.ruleForm[x];
								}
								this.tableData.push(obj);
								this.dialogVisible = false;
							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					open(formName) {
						this.$refs[formName].resetFields();
						this.dialogVisible = true;
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					}
				},
				computed: {
					nameMonitor() {
						return this.ruleForm.name;
					}
				},
				watch: {
					nameMonitor(val) {
						
					}
				},
			})
		</script>
	</body>

</html>
